<template>
  <div class="search-filter-bar">
    <div class="search-filter-bar__body">
      <slot name="left" />
      <div
        v-if="useFast"
        class="console-action"
      >
        <el-form
          ref="fastForm"
          :inline="true"
          :model="fastForm"
          size="small"
          class="fast-search__form"
          label-position="left"
          label-width="25%"
          @submit.native.prevent
        >
          <el-form-item>
            <el-input
              v-model="fastForm.keyword"
              class="fast-search-input"
              :placeholder="keywordPlaceholder"
              @keyup.enter.native="onFastSearch"
            >
              <!--下拉选择类型-->
              <el-select
                v-if="keytypes.length"
                slot="prepend"
                v-model="fastForm.keytype"
                :multiple="multipleTypes"
                collapse-tags
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="(option,itemIndex) in keytypes"
                  :key="itemIndex"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="onFastSearch"
              />
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="search-filter-bar__body-right">
        <el-button
          v-if="showAdvence"
          type="text"
          size="small"
          @click="advanceSearch=!advanceSearch"
        >{{ advanceSearch?'快捷搜索':'高级搜索' }}</el-button>
        <slot name="after" />
      </div>
    </div>
    <div
      v-if="advanceSearch"
      class="search-filter-bar__form"
    >
      <slot>
        <advence-form
          v-model="filterData"
          :config="config"
          @filter="onFilterSearch"
        />
      </slot>
    </div>
  </div>
</template>

<script>
import AdvenceForm from './components/AdvenceForm'
export default {
  name: 'FilterSearchBar',
  components: {
    AdvenceForm
  },
  props: {
    config: {
      type: Array,
      default() {
        return []
      }
    },
    filterData: {
      type: Object,
      default() {
        return {}
      }
    },
    keytypes: {
      type: Array,
      default() {
        return []
      }
    },
    keyword: {
      type: String,
      default: 'keyword'
    },
    keywordPlaceholder: {
      type: String,
      default: '请输入关键词进行检索'
    },
    title: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: ''
    },
    backText: {
      type: String,
      default: '返回'
    },
    multipleTypes: {
      type: Boolean,
      default: false
    },
    useFast: {
      type: Boolean,
      default: true
    },
    showAdvence: {
      type: Boolean,
      default: true
    }
  },
  inject: ['goBack'],
  data() {
    return {
      advanceSearch: true,
      fastForm: {
        keyword: '',
        keytype: ''
      }
    }
  },
  computed: {
    isSolted() {
      console.log(this.$slots.advence)
      return true
    },
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  watch: {},
  mounted() {
    this.advanceSearch = this.showAdvence || !this.useFast
  },
  methods: {
    onFastSearch() {
      this.emitFilter()
    },
    onFilterSearch(data) {
      this.filterData = { ...data }
      this.emitFilter()
    },
    emitFilter() {
      this.$emit('filter', { ...this.filterData, ...this.fastForm })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-filter-bar {
  &__body {
    display: flex;
    margin-bottom: 20px;
    &-right {
      flex: 1;
      display: flex;
      justify-content: flex-end;
    }
    > * + * {
      margin-left: 10px;
    }
    ::v-deep .el-button {
      display: inline-flex;
      align-items: center;
    }
  }
  .fast-search__form {
    ::v-deep .el-form-item {
      margin: 0;
      display: flex;
    }
  }
  .fast-search-input {
    ::v-deep .el-input-group__prepend,
    ::v-deep .el-input-group__append {
      padding-left: 15px;
      padding-right: 15px;
      background: transparent;
    }
    ::v-deep .el-select .el-input {
      width: 100px;
    }
  }
}
</style>
